<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/js/plugin/element/css/index.css">
    <link rel="stylesheet" href="/css/reset.css">

    <style>
        html, body {
            height: 100%;
            overflow: hidden;
        }
        el-header {
            background-color: #545c64;
            color: #333;
            padding: 0;
        }

        .el-header .el-menu {
            margin-left: 43px;
        }
        .el-header{
            background-color: #545c64;
            padding-right: 0;
        }
        .el-aside {
            background-color: #545c64;
            color: #333;
            height: 100%;
            width: auto !important;
            top: 61px;
            bottom: 0;
            left: 0;
            position: absolute;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }

        .el-radio-button__inner {
            background: #545c64;
            color: #fff;
            border: 0px;
            width: 18px;
        }

        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            background: #545c64;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--头部导航-->
        <el-header>
            <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
            >
                <el-menu-item v-for="item,i in topBarList" v-if="item.children.length == 0" :index="item.index">
                    <a :href="item.url" target="_blank">{{item.title}}</a>
                </el-menu-item>
                <el-submenu v-for="item,i in topBarList" v-if="item.children.length > 0" :index="item.index">
                    <template slot="title">{{item.title}}</template>
                    <el-menu-item v-for="option in item.children" :index="option.index">{{option.subtitle}}
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-header>
        <!--左侧导航-->
        <el-container>
            <el-aside>
                <el-radio-group v-model="isCollapse">
                    <el-radio-button :label="false"><i class="el-icon-d-arrow-right"></i></el-radio-button>
                    <el-radio-button :label="true"><i class="el-icon-d-arrow-left"></i></el-radio-button>
                </el-radio-group>
                <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
                         @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                         background-color="#545c64" text-color="#fff">
                    <el-menu-item index="2" v-for="item in leftBarList" :index="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</div>
</body>

<script src="/js/vue.js"></script>
<script src="/js/plugin/element/js/index.js"></script>

<script>
    var topBarData = [
        {
            title: '处理中心',
            index: '1',
            children: [],
            url: '#'
        }, {
            title: '我的工作台',
            index: '2',
            children: [
                {
                    subtitle: '选项1',
                    index: '2-1',
                    url: '#'
                }, {
                    subtitle: '选项2',
                    index: '2-2',
                    url: '#'
                }, {
                    subtitle: '选项3',
                    index: '2-3',
                    url: '#'
                }
            ]
        }, {
            title: '消息中心',
            index: '3',
            children: [],
            url: '#'
        }, {
            title: '订单管理',
            index: '4',
            children: [],
            url: '#'
        }
    ];

    var leftBarData = [
        {
            title: '导航一',
            index: '1',
            children: [
                {
                    secondary: '分组一',
                    index: 1 - 1
                }, {
                    secondary: '分组二',
                    index: 1 - 2
                }
            ],
            url: '#',
            icon: 'el-icon-menu'
        }, {
            title: '导航二',
            index: '2',
            children: [],
            url: '#',
            icon: 'el-icon-setting'
        }, {
            title: '导航三',
            index: '3',
            children: [],
            url: '#',
            icon: 'el-icon-document'
        }, {
            title: '导航四',
            index: '4',
            children: [],
            url: '#',
            icon: 'el-icon-menu'
        }
    ];
    new Vue({
        el: '#app',
        data:{
            activeIndex:'1',
            isCollapse: true,
            topBarList: topBarData,
            leftBarList: leftBarData
        },
        methods:{
            handleSelect(key, keyPath){
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            btnHandler(ev) {
                console.log(ev);
            }
        }
    })
</script>
</html>